<template>
  <el-container>
    <el-header style="height: 40px">
      <span style="font-size: 30px">我的订单</span>
    </el-header>
    <el-main>
      <el-container>
        <el-header style="height: 40px">
          <el-container>
            <el-main>
              <div style="font-size: 20px">
              <a class="pointer" @click="getOrder('0')">全部有效订单</a><span style="margin: 0 10px">  | </span>
              <a class="pointer" @click="getOrder('2')">待支付</a><span style="margin: 0 10px"> | </span>
              <a class="pointer" @click="getOrder('1')">待收货</a><span style="margin: 0 10px"> | </span>
              <a class="pointer" @click="getOrder('3')">订单回收站</a>
            </div></el-main>
            <el-aside width="320px">
              <div >
                <el-input v-model="queryParams.inputContent" placeholder="商品名或订单号" clearable style="width: 220px"></el-input>
                <el-button icon="el-icon-search" @click="submitSearch" style="border-left: none">搜索</el-button>
              </div>
            </el-aside>
          </el-container>
        </el-header>
        <el-main>
          <!--数据区-->
          <el-table
              :data="tableData"
              v-loading="loading"
              style="width: 100%">
            <el-table-column prop="product" label="订单详情" min-width="45%" align="center">
              <template v-slot="scope">
                <div class="data-header" align="left">
                  <span >{{ scope.row.dealTime }}</span>
                  <span style="margin-left: 20px">订单号：{{ scope.row.orderNumber }}</span>
                </div>
                <div align="left" v-for="(name, index) in scope.row.productNames" :key="index">
                  <span>{{ name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="数量" min-width="5%" align="center">
              <template v-slot="scope">
                <div class="data-header" ></div>
                <div v-for="(amount, index) in scope.row.amounts" :key="index">{{ amount }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="收货地址" min-width="10%" align="center"></el-table-column>
            <el-table-column prop="cost" label="金额" min-width="10%" align="center"></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" min-width="10%" align="center"></el-table-column>
            <el-table-column label="操作" min-width="10%" align="center">
              <template v-slot="scope">
                <el-button type="danger" size="mini" @click="checkout(scope.row)" v-if="scope.row.orderStatus==='待支付'">去支付</el-button>
                <el-button icon="el-icon-delete" @click="deleteOrder(scope.row)" size="mini" v-else>删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              @pagination="getOrder(0)"
          />

          <el-dialog
              title="确认付款"
              :visible.sync="openPay"
              width="30%"
              style="min-width: 300px">
            <pay :orderNum="orderNum" :openPay="openPay"></pay>
          </el-dialog>

        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import { getOrders, findOrders, deleteOrder } from "@/api/user";
import pay from "@/components/payment/pay";

export default {
  name: "orderList",
  components: {pay},
  data() {
    return {
      input: '',
      // 页面展示的订单的数据源
      tableData: [],
      // 订单状态
      type: {"0": "已完成", "1": "待收货", "2": "待支付", "3": "已删除"},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        inputContent: undefined, // 搜索框的值
        status: undefined
      },
      // 查询结果总条数
      total: 0,
      // 遮罩层
      loading: true,
      // 去支付的dialog
      openPay: false,
      // 订单号
      orderNum: undefined
    }
  },
  created() {
    this.getOrder(0)
  },
  methods: {
    // 获取我的订单
    getOrder(status) {
      this.loading = true
      this.tableData = []
      this.inputContent = ""
      let params = this.queryParams;
      params.status = status;
      getOrders(params).then((response) => {
        this.setOrder(response.orders.rows);
        this.total = response.orders.total;
        this.loading = false
      })
    },
    // 将后端传来的list按填入对应的地方
    setOrder(orderShowList) {
      for (let order of orderShowList) {
        let temp = {}
        temp.dealTime = order.dealTime
        temp.orderNumber = order.orderNumber
        temp.productNames = order.productNames
        temp.amounts = order.amounts
        temp.address = order.city
        temp.cost = order.cost
        temp.orderStatus = this.type[order.orderStatus];
        this.tableData.push(temp)
      }
    },
    // 删除订单
    deleteOrder(row) {
      this.$confirm('是否确认删除订单：' + row.orderNumber , "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then (() => {
        deleteOrder(row.orderNumber).then((response) => {
          this.$message(response.message);
          this.getOrder(0)
        })
      })
    },
    // 搜索的方法
    submitSearch() {
      this.tableData = []
      findOrders(this.queryParams).then((response) => {
        if (response.orders) {
          this.setOrder(response.orders)
          this.total = response.orders.length;
          this.loading = false
        }
      })
    },
    // 去支付的方法
    checkout(row) {
      this.orderNum = row.orderNumber
      this.openPay = true;
    }
  }

}
</script>

<style scoped>

.pointer {
  cursor: pointer;
}

/deep/ .el-button--primary {
  color: black;
  background-color: white;
  border-color: gray;
}

.el-button {
  border-color: #DCDFE6;
  padding: 12px 12px;
  border-radius: 0;
}

/deep/ .el-input__inner {
  border-radius: 0;
}


</style>
